<template>
  <div class="content_box">
    <div class="msg_box">
      <div class="box">
        <p class="title">优惠券名称</p>
        <p class="price">
          <input v-model="formData.name" type="text" placeholder="请输入优惠券名称">
        </p>
      </div>
      <div class="box">
        <p class="title">优惠券类型</p>
        <picker @change="changeCoupon" :range="array" range-key="name">
          <div class="picker">
            {{formData.couponType == 0?'指定金额':formData.couponType == 1?'区间折扣券':formData.couponType == 2?'满减券':'请选择'}}
            <van-icon name="arrow" />
          </div>
        </picker>
      </div>
      <!-- 折扣 -->
      <div class="box" v-if="formData.couponType == 1">
        <p class="title">优惠折扣</p>
        <p class="price">
          <input v-model="formData.discount" type="text" placeholder="请输入折扣">
          <span>折</span>
        </p>
      </div>

      <!-- 满减 -->
      <div class="box" v-if="formData.couponType == 2">
        <p class="title">满减优惠</p>
        <div class="yy">
          <p class="price">
            <span>满</span>
            <input v-model="formData.full" type="text" placeholder="请输入">
          </p>
          <p class="price">
            <span>减</span>
            <input v-model="formData.subtract" type="text" placeholder="请输入">
          </p>
        </div>
      </div>
      
      <!-- 指定金额 -->
      <div class="box" v-if="formData.couponType == 0">
        <p class="title">优惠金额</p>
        <p class="price">
          <input v-model="formData.amount" type="text" placeholder="请输入优惠金额">
          <span>元</span>
        </p>
      </div>
      <div class="box">
        <p class="title">开始时间</p>
        <picker mode="date" @change="changeStartTime" :range="array" range-key="name">
          <div class="picker">
            {{formData.startTime?formData.startTime:'请选择'}}
            <van-icon name="arrow" />
          </div>
        </picker>
      </div>
      <div class="box">
        <p class="title">结束时间</p>
        <picker :start="formData.startTime" mode="date" @change="changeEndTime" :range="array" range-key="name">
          <div class="picker">
            {{formData.endTime?formData.endTime:'请选择'}}
            <van-icon name="arrow" />
          </div>
        </picker>
      </div>
      
      <div class="box">
        <p class="title">优惠券内容</p>
        <p class="price">
          <input v-model="formData.remark" type="text" placeholder="请输入内容">
        </p>
      </div>
      <div class="box">
        <div>
          <p class="title">发放方式</p>
          
        </div>
        <picker @change="changeGiveOutType" :range="giveOutTypeList" range-key="name">
          <div class="picker">
            {{formData.giveOutType == 1?'用户领取':formData.giveOutType == 0?'系统发放':'请选择'}}
            <van-icon name="arrow" />
          </div>
        </picker>
      </div>

      <!-- <div class="box" v-if="formData.giveOutType == 1">
        <p class="title">领取数量</p>
        <p class="price">
          <input type="number" placeholder="请输入数量">
          <span>张</span>
        </p>
      </div> -->
      
      <div class="box">
        <div>
          <p class="title">是否推荐</p>
          <p class="tips">*选择推荐首页将显示</p>
        </div>
        <div class="yj">
          <p 
          @click="clickStatus(index)" 
          :class="statusIndex == index?'on':''" 
          v-for="(item,index) in status_list" :key="index">{{item.label}}</p>
        </div>
      </div>
    </div>
    <div class="anniu_box">
      <van-button 
        @click="submit"
        :disabled="loading"
        :loading="loading" 
        :loading-text="formData.id?'修改中...':'新增中...'"
        type="primary"
        color="#3d98f7"
        custom-style="box-shadow: 0rpx 10rpx 20rpx #CEDBFA;border:none;width: 100%;height: 88rpx;line-height: 88rpx;background: #1E68FF;border-radius: 100rpx;text-align: center;color: #fff;font-size: 30rpx;"
      >{{formData.id?'立即修改':'立即新增'}}</van-button>
    </div>
  </div>
</template>
 
<script>
import {
  addCoupon,
  updateCoupon,
  getCouponById
} from "@/api/index";
export default {
  components: {},
  data() {
    return {
      status_list:[
        {
          value:'0',
          label:'不推荐',
        },
        {
          value:'1',
          label:'推荐',
        },
      ],
      statusIndex:0,
      array:[
        {
          type:0,
          name:'指定金额券'
        },
        {
          type:1,
          name:'折扣券'
        },
        {
          type:2,
          name:'满减券'
        }
      ],
      giveOutTypeList:[
        {
          type:0,
          name:'系统发放'
        },
        {
          type:1,
          name:'用户领取'
        },
      ],
      formData:{
        name:'',// 优惠券名称
        couponType:null,// 优惠券类型0-指定金额 1-折扣 2-满减
        startTime:'',// 开始时间
        endTime:'',// 结束时间
        full:'',// 满多少金额
        geDiscount:'',// 最大折扣
        leDiscount:'',// 最小折扣
        giveOutType:0,// 0-系统发放 1-用户领取
        remark:'',// 优惠券备注
        subtract:'',// 减多少金额
        amount:'',// 指定金额
        suggest:'0', // 推荐 0-否 1-是
        storeId:''
      },
      loading:false
    };
  },
  onShow() {},

  methods: {

    // 回显
    getHuixian(id){
      this.$showLoading('加载中...')
      getCouponById({id}).then(res=>{
        if(res.statusCode == '00000'){
          if(res.data.suggest){
            this.statusIndex = 1
          }else{
            this.statusIndex = 0
          }
          this.formData = res.data
          wx.hideLoading()
        }else{
          wx.hideLoading()
        }
      })
    },

    // 是否推荐
    clickStatus(index){
      this.statusIndex = index
      this.formData.suggest = this.status_list[index].value
    },

    // 发放方式
    changeGiveOutType(e){
      let index = e.mp.detail.value
      this.formData.giveOutType = this.giveOutTypeList[index].type
    },

    // 选择开始时间
    changeStartTime(e){
      console.log(e)
      this.formData.startTime = `${e.mp.detail.value} 00:00:00`
    },

    // 选择结束时间
    changeEndTime(e){
      console.log(e)
      this.formData.endTime = `${e.mp.detail.value} 00:00:00`
    },
    
    // 选择优惠券
    changeCoupon(e){
      let index = e.mp.detail.value
      this.formData.couponType = this.array[index].type
      console.log(e)
      if(index == 0){
        this.formData.discount = ''
        this.formData.subtract = ''
        this.formData.full = ''
      }
      if(index == 1){
        this.formData.subtract = ''
        this.formData.full = ''
        this.formData.amount = ''
      }
      if(index == 2){
        this.formData.amount = ''
        this.formData.discount = ''
      }
    },

    // 提交
    submit(){
      console.log(this.formData)
      let zs = /^\+?[1-9][0-9]*$/;
      if(!this.formData.name){
        this.$toast('请输入优惠券名称')
        return
      }
      if(this.formData.couponType == null){
        this.$toast('请选择优惠券类型')
        return
      }
      // 指定金额
      if(this.formData.couponType == 0){
        if(!this.formData.amount){
          this.$toast('请输入优惠金额')
          return
        }
      }
      // 折扣
      if(this.formData.couponType == 1){
        if(!this.formData.discount){
          this.$toast('请输入折扣')
          return
        }
      }

      // 满减
      if(this.formData.couponType == 2){
        if(!this.formData.full){
          this.$toast('请输入满减金额')
          return
        }
        if(!this.formData.subtract){
          this.$toast('请输入减少金额')
          return
        }
      }

      if(!this.formData.startTime){
        this.$toast('请选择开始时间')
        return
      }
      if(!this.formData.endTime){
        this.$toast('请选择结束时间')
        return
      }
      if(!this.formData.remark){
        this.$toast('请输入优惠券内容')
        return
      }
      // if(this.formData.giveOutType == null){
      //   this.$toast('请选择发放方式')
      //   return
      // }
      // 用户领取发放方式
      // if(this.formData.giveOutType == 1){
       
      // }
      this.$showLoading(this.formData.id?'修改中...':'新增中...')
      this.loading = true
      let returnData = this.formData.id?updateCoupon(this.formData):addCoupon(this.formData)
      returnData.then(res=>{
        if(res.statusCode == '00000'){
          this.loading = false
          wx.navigateBack({
            delta: 1
          });
          wx.hideLoading()
          this.$toast(this.formData.id?'修改成功':'新增成功')
        }else{
          wx.hideLoading()
          this.loading = false
          this.$toast(res.message)
        }
      })
    }
  },
  onLoad(options) {
    this.formData.storeId = options.storeId
    if(options.id){
      this.formData.id = options.id
      this.getHuixian(options.id)
    }else{
      delete this.formData.id
    }
  },
  onHide() {},

  onUnload() {
    this.formData = {
      name:'',// 优惠券名称
      couponType:null,// 优惠券类型0-指定金额 1-折扣 2-满减
      startTime:'',// 开始时间
      endTime:'',// 结束时间
      full:'',// 满多少金额
      geDiscount:'',// 最大折扣
      leDiscount:'',// 最小折扣
      // giveOutType:null,// 0-系统发放 1-用户领取
      remark:'',// 优惠券备注
      subtract:'',// 减多少金额
      amount:'',// 指定金额
      suggest:'0'// 推荐 0-否 1-是
    }
  },
};
</script>

<style lang="scss" scoped>
.msg_box{
  margin:0 30rpx;
  .box{
    height: 100rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size:28rpx;
    color:#222;
    border-bottom:1px solid #f5f5f5;
    .title{
      font-weight: 500;
      display: flex;
      align-items: center;
      span{
        display: inline-block;
        width: 30rpx;
        height: 30rpx;
        line-height: 30rpx;
        background: #1E68FF;
        border-radius: 50%;
        color:#fff;
        text-align: center;
        font-size:24rpx;
        margin-left:20rpx;
      }
    }
    .tips{
      font-size:22rpx;
      color:red;
      margin-top:4rpx;
    }
    .price{
      display: flex;
      align-items: center;
      input{
        text-align: right;
        margin-right:20rpx;
        height: 100rpx;
      }
    }
    .yj{
      display: flex;
      align-items: center;
      p{
        width: 140rpx;
        padding:8rpx 0;
        background: #F1F3F4;
        border-radius: 10rpx;
        font-size:28rpx;
        margin-right:30rpx;
        text-align: center;
      }
      .on{
        background: #1E68FF;
        color:#fff;
      }
      input{
        text-align: right;
        margin-right:20rpx;
        font-size:28rpx;
      }
      span{
        font-size:28rpx;
      }
    }
    .yy{
      display: flex;
      input{
        width: 140rpx;
        border:1px solid #dcdfe6;
        text-align: center;
        height: 60rpx;
        border-radius: 10rpx;;
        margin:0;
      }
      span{
        margin:0 20rpx;
      }
  
    }
  }
}
.anniu_box{
  margin:50rpx 30rpx;
}
</style>